<template>
    <div style="background-color: #ffffff;">
        <!-- :before-change="beforeChange" -->
        <!-- <HeadNav :title="'留存填报'" :leftArrow="true"></HeadNav> -->
        <!-- 周月年 -->
        <div class="content">
            <div class="imageBox">
                <img :src="dishInfo.dishImage" alt="">
            </div>
            <div class="recordList recordList_pb">
                <div class="recordInfoItem applyTime">
                    <div class="label">填报时间</div>
                    <div class="text">{{dishInfo.sampleTime}}</div>
                </div>
                <!-- <div class="recordInfoItem applyUser mt38">
                    <div class="label">填报人</div>
                    <div class="text">尚文文</div>
                </div> -->
                <div class="recordInfoItem applyUser mt38">
                    <div class="label">菜品名称</div>
                    <div class="text">{{dishInfo.dishName}}</div>
                </div>
                <div class="recordInfoItem describe mt38">
                    <div class="label">菜品描述</div>
                    <div class="text">{{dishInfo.description}}</div>
                </div>
                <div class="recordInfoItem remark mt38">
                    <div class="label">菜品备注</div>
                    <div class="text">{{dishInfo.remarks}}</div>
                </div>
            </div>
        </div>
        <!-- <foot></foot> -->
    </div>
</template>

<script>
/* eslint-disable */
import { getParams } from '@/common/public'
import HeadNav from '@/components/HeadNav'
import foot from '../foot/foot.vue'
import { getDishSampleByIdApi } from '@/api/stall'
import { Toast } from 'vant';

export default {
    name: 'PreserveDetails',
    components: {
        HeadNav,
        foot
    },
    computed: {
        // ...mapState({
        //     token: (state) => state.applyrecords.token
        // })
    },
    watch: {
        active(newVal) {
            console.log('newVal', newVal)
            if (newVal === 0) {

            } else if (newVal === 0) {

            } else {

            }
        }
    },
    data() {
        return {
            active: 0,
            loading: true,
            
            show: true,
            current: 0,
            currentItem: -1,
            showTipsSingle: false,
            popupItem: undefined,
            value:undefined,
            showSheet:false, //显示选择弹窗
            dishId:undefined,
            dishInfo:{ }
           
        }
    },

    beforeRouteEnter(to, from, next) {
        next((vm) => {
            if(to.query.item){
                vm.localData = JSON.parse(to.query.item)
                console.log(vm.localData,' 参数')
                vm.dishId = vm.localData.id
                console.log(vm.dishId,'id')
            }
        })
    },
    mounted() {
        console.log(this.dishId,'id')
        this.getOneDishSample(this.dishId)
    },
    created() {
        console.log(this.id)

    },

    methods: {
        // 接口  菜品留存信息
        getOneDishSample(dishId){
            this.loading=true
            getDishSampleByIdApi(dishId).then(res=>{
                if(res.code===200){
                    this.loading=false
                    this.dishInfo=res.data
                }else{
                    Toast(res.message)
                }
            })
        },
        // // 页面的确认按钮
        // toShowPopupSubmit(item) {
        //     console.log(item);
        //     this.popupItem = item
        //     this.showTipsSingle = true
        // },
        // // 申请弹窗按钮
        // submitToApply() {
        //     console.log();
        //     // outStore(this.popupItem.reportId).then(res => {
        //     //     if (res.code === 200) {
        //     //         this._outToday()
        //     //         Toast('出库成功')
        //     //     }
        //     // })
        //     this.showTipsSingle = false
        // },
        // _outToday() {
        //     this.loading = true
        //     const data = {
        //         status: this.current == 0 ? '入库' : '出库'
        //     }
        //     outToday(data).then(res => {
        //         if (res.code == 200) {
        //             this.recordList = res.data.records
        //             this.loading = false
        //             this.recordList.forEach(ele => {
        //                 this.$set(ele, 'isChecked', false)
        //             })
        //         } else {
        //             Toast(res.message)
        //         }

        //     })
        //     console.log(data);
        // },
        // toCheck() { },
        // // 申报明细
        // showDetail(item, val) {
        //     console.log(item, val, 'xinxi ')
        //     this.currentItem = val
        //     this.show = !this.show
        //     item.isChecked = !item.isChecked
        // },
        changeSort(index, e, name) {
            this.current = index
            // this._outToday()
        },
        // // 留存填报
        // toPreserveApply(){
        //     this.$route.push({
        //         path:'/preserveDishes'
        //     })
        // },
    },
    beforeDestroy() {
        console.log('index')
        window.removeEventListener('scroll', this.onLoad, true)
    }
}
</script>

<style lang="less" scoped>
span,
p {
    padding: 0;
    margin: 0;
}


.content {
    //margin-top: 48px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #ffffff;
    height: 100%;
    // padding-bottom: 50px;
}

.imageBox{
    height: 376px;
    width: 100%;
    img{
        height: 376px;
        width: 100%;
    }
}

.recordList {
    // margin-top: 48px;
    background: #ffffff;
    padding-top: 24px;
    padding-left: 24px;
    padding-right: 24px;
    // height: 100%;
    // overflow: auto;
    .recordInfoItem{
        display: flex;
        // margin-top: 38px;
    }
    .applyTime,.applyUser {
        display: flex;
        align-items: center;
    }

    .label {
        font-size: 13px;
        color: #999999;
        line-height: 13px;
        width: 20%;
    }

    .text {
        font-size: 13px;
        color: #000000;
        margin-left: 35px;
        width: calc(80% - 35px);
    }

}

.recordList_pb {
    padding-bottom: 70px;
}

/*清浮动*/
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

.clearfix {
    zoom: 1;
}

// 无数据
.empty_content {
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #000000;
    font-size: 16px;
    background: #ffffff;
}

.mt38{
    margin-top: 38px;
}


</style>